/**
* @作者:邹蕴果
* @创建时间：2021/7/7
* @修改时间：2021/7/8
*/

<template>
	<view class="main">
		<!-- 头部导航栏 -->

		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo"
				@click="jumpToMain">
			<view class="navitems">
				<view class="navitem" @click="jumptoLogIn" v-if="!isLogin">登录</view>
				<el-badge :value="messageNum" class="navitem" v-if="isLogin" hidden="messageNum==0">
					<view @click="jumpToMessage">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut" v-if="isLogin">退出登录</view>
			</view>
		</view>

		<view class="body">
			<!-- 搜索栏 -->
			<div class="search">
				<el-input class="searchInput" type="text" placeholder="请输入想要租赁的商品" v-model="searchtext">
				</el-input>
				<div class="searchEmtpy"></div>
				<el-button class="search-btn" icon="el-icon-search" @click="jumpToSearch" type="primary">搜索</el-button>
			</div>
			<!-- 导航栏 -->

			<view class="breadcrumb">
				<view class="breadcrumb_content">
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{ path: '/' }" style="font-size: 17px">首页</el-breadcrumb-item>
						<el-breadcrumb-item style="font-size: 17px">{{value1}}/{{value2}}</el-breadcrumb-item>
					</el-breadcrumb>
				</view>
			</view>
			<!-- 商品选择 -->

			<view class="Row1">
				<view class="screentext">选择品牌</view>
				<view class="searchMethod">
					<div style="margin-top: 20px">
						<el-radio v-model="radio1" label="全部" @change="radioChange" border>全部</el-radio>
						<el-radio v-model="radio1" v-for="(one,index) in brands" :label="one.name" @change="radioChange"
							border>{{one.name}}</el-radio>
						<!-- <el-radio-group v-model="radio1" @change="radioChange" size="medium" class="searchMethod">

							<el-radio-button label="全部"></el-radio-button>
							<el-radio-button v-for="(one,index) in brands" :label="one.name"></el-radio-button>

						</el-radio-group> -->
					</div>
				</view>
			</view>
			<view class="Row2">
				<view class="screentext">排序方式</view>
				<el-select v-model="SearchMethod" collapse-tags placeholder="排序方式" @change="handleSelect">
					<el-option v-for="item in SearchOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</view>
			<!-- 商品列表 -->
			<view class="goodsRow">

				<el-card v-for="one in goodstake" shadow="hover" class="goodItem" @click.native="jumpToDetail(one.id)">
					<div class="recCard-image">
						<el-image style="width: 100%;height: 100%;"
							:src='"http://47.96.168.135:7388"+one.skuImages[0].url' fit="contain"></el-image>
					</div>
					<div style="padding: 14px;">
						<span>{{one.name}}</span>
						<view style="color: #FF0000; margin-top: 15rpx;">¥{{one.skuSpecificationOptions[0].price}} 起
						</view>
					</div>
				</el-card>

			</view>
			<el-pagination background layout=" pager" class="pager" :total=10*(this.sumOfSKU/12)
				@current-change="handlepageChange">
			</el-pagination>
		</view>
	</view>
	</view>
</template>

<script>
	const searchOptions=['索尼','任天堂','微软','世嘉']
	export default {
		

		data() {
			return {
				searchtext: '',
				brands: [],
				radio1: "全部",
				firstid: '',
				curnum: 1,
				pagShow: true,
				goodstake: [],
				sumOfSKU: -1,
				checkAll: false,
				checkedOptions: [],
				SearchOptions: [{
					value: '默认',
					label: '默认'
				}, {
					value: '销量降序',
					label: '销量降序'
				}, {
					value: '销量升序',
					label: '销量升序'
				}, {
					value: '价格降序',
					label: '价格降序'
				}, {
					value: '价格升序',
					label: '价格升序'
				}],
				checkoptions: searchOptions,
				isIndeterminate: true,

				
				value1: "",
				value2: "",
				SearchMethod: "默认",
				curPage: 1,
				responseForm: [],

				isLogin: this.$cookies.isKey("userId"),
			}
		},
		mounted: function() {
			this.change()
		},
		methods: {

			jumpToMain() {
				uni.redirectTo({
					url: "Userindex"
				})
			},
			//退出登录
			openLogOutWindow() {
				this.$confirm('确定要退出登录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$cookies.remove("userName")
					this.$cookies.remove("userId")
					this.$cookies.remove("userFaceImg")
					location.reload()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出登录'
					});
				});
			},
			logOut() {
				this.openLogOutWindow()
			},
			//界面跳转
			jumptoLogIn() {
				uni.redirectTo({
					url: 'UserLoginIndex'
				})
			},
			//界面跳转
			jumpToSearch() {
				uni.navigateTo({
					url: 'search?searchText=' + this.searchtext
				})
			},
			//变更页码显示

			async handleSelect(val) {

				await this.$axios({
					method: 'get',
					url: '/SKU/getSum?CategoryName=' + this.value2 + '&BrandName=' + this.radio1,
				}).then(response => {
					this.sumOfSKU = response.data.date;
				})

				var take = (this.sumOfSKU >= 12 * this.curPage) ? 12 : this.sumOfSKU - 12 * (this.curPage - 1);

				await this.$axios({
					method: 'get',
					url: '/SKU/getList?CategoryName=' + this.value2 + '&BrandName=' + this.radio1 +
						'&Take=' + take + '&Page=' + this
						.curPage + '&Type=' + val,

				}).then(response => {
					this.responseForm = response.data.date
				});
				this.goodstake = this.responseForm;



			},
			handleCheckAllChange(val) {
				this.checkedOptions = val ? searchOptions : [];
				this.isIndeterminate = false;
			},
			//选择品牌处理函数

			async radioChange(val) {
				this.SearchMethod = "默认"

				await this.$axios({
					method: 'get',
					url: '/SKU/getSum?CategoryName=' + this.value2 + '&BrandName=' + this.radio1,
				}).then(response => {
					this.sumOfSKU = response.data.date;
				})


				var take = (this.sumOfSKU >= 12 * this.curPage) ? 12 : this.sumOfSKU - 12 * (this.curPage - 1);

				await this.$axios({
					method: 'get',
					url: '/SKU/getList?CategoryName=' + this.value2 + '&BrandName=' + val +
						'&Take=' + take + '&Page=' + this.curPage + '&Type=' + this.SearchMethod,

				}).then(response => {

					this.responseForm = response.data.date

				});
				this.goodstake = this.responseForm;
			},
			handlepageChange(val) {

				this.curPage = val;
				this.change();

			},
			//获取商品列表

			async change() {

				await this.$axios({
					methods: 'get',
					url: '/Brand/getList?CategoryName=' + this.value2,

				}).then(res => {
					this.brands = res.data.date
				})

				await this.$axios({
					method: 'get',
					url: '/SKU/getSum?CategoryName=' + this.value2 + '&BrandName=' + this.radio1,
				}).then(response => {
					this.sumOfSKU = response.data.date;
				})

				var take = (this.sumOfSKU >= 12 * this.curPage) ? 12 : this.sumOfSKU - 12 * (this.curPage - 1);

				await this.$axios({
					method: 'get',
					url: '/SKU/getSameCategory?CategoryName=' + this.value2 + '&Take=' + take + '&Page=' + this
						.curPage +
						'&Type=' + this.SearchMethod,

				}).then(response => {

					this.responseForm = response.data.date

				});


				this.goodstake = this.responseForm;
			},
			//页面跳转

			jumpToDetail: function(id) {
				uni.redirectTo({
					url: 'GoodsDetail?id=' + id + '&value1=' + this.value1 + '&value2=' + this.value2
				})
			},

			onLoad(option) {

				this.value1 = option.id1;
				this.value2 = option.id2;

			},

			onShow() {

			}
		},
	}
</script>

<style>
	.body {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.jump {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		justify-content: center;
		align-items: center;
		float: left;
	}

	/* 顶栏style */
	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	/* 搜索框 */
	.search {
		margin: auto;
		display: flex;
		width: 53%;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}

	.searchEmtpy {
		width: 2%;
	}

	/* 面包屑 */
	.breadcrumb {
		width: 100%;
		transform: translateX(100px);
		background-color: #EEEEEE;
		height: 30px;
		transform: translateX(-0px);
		transform: translateY(-3px);
	}

	.breadcrumb_content {
		display: flex;
		width: 100%;
		margin-left: 6%;
		margin-top: 0.1cm;
	}

	.screentext {
		width: 100px;
		font-size: 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		color: #707070;
	}

	.Row1 {
		width: 87%;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #F0F0F0;
		padding-bottom: 20rpx;
		margin-left: 6%;
	}

	.Row2 {
		width: 87%;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #F0F0F0;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
		margin-left: 6%;
	}

	.goodsRow {
		margin-top: 80rpx;
		margin-left: 4%;
		margin-right: 4%;
	}

	.recCard-image {
		width: 100%;
		height: 400rpx;
	}

	.goods {
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.goodItem {
		width: 18.5%;
		border-radius: 5;
		border-color: #f0f0f0;
		height: 600rpx;
		text-align: center;
		float: left;
		margin-left: 1%;
	}

	.goodimage {
		width: 100%;
		height: 70%;
	}

	.pager {
		margin: 0 auto;
		margin-top: 80rpx;
	}
</style>
